 <template>
  <!-- 课程体系(首页)-->
  <div class="container-fluid">
    <div class="row carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img
            src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/banner2-3.png"
            class="d-block w-100"
            alt="..."
          >
        </div>
        <div class="Suspension">
          <div class="tit">
            <p class="cla">课程体系</p>
          </div>
          <ul class="kuang">
            <li class="alone">
              <p class="atch">乐高<br/>创意启蒙课程</p>
            </li>
            <li class="alone1">
              <p class="atch">Scratch<br/>儿童积木式编程</p>
              
            </li>
            <li class="alone2">
              <p class="atch">Scratch<br/>机器人启蒙课程</p>
             
            </li>
            <li class="alone3">
               <p class="atch">Micro:bit<br/>机器人基础编程</p>
              
            </li>
            <li class="alone4">
              <p class="atch">Arduino<br/>开源硬件编程</p>
             
            </li>
            <li class="alone5">
               <p class="atch">Python<br/>智能机器人编程</p>
              
            </li>
            <li class="alone6">
              <p class="atch">ROS<br/>智能机器人操作系统</p>
              
            </li>
            <li class="alone7">
              <p class="atch">Python<br/>人工智能编程</p>
              
            </li>
            <li class="alone8">
              <p class="atch">机器人与人工智能专业大学先修课</p>
            </li>
            <li class="alone9">
              <p class="atch">STEAM<br/>创新课程</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="box row">
      <div class="box1">
        <div class="box2"></div>
        <div class="box33">
          <p>专为3-7岁幼儿设计开发，让孩子了解简单的机械原理、百科知识并培养日常生活基本认知。孩子会在模仿搭建中学会观察和寻找规律，在创意设计中感受结构与功能的关系并变得乐于表达，在合作探索中培养自信并锻炼与他人沟通的能力。</p>
        </div>
      </div>
    </div>
    <div class="two row">
      <div class="two2">
        <div class="two1"></div>
        <div class="box34">
          <p>将孩子喜欢的故事情节与美国麻省理工学院设计开发的简易图形化编程工具Scratch相结合，让孩子轻松学习并熟练运用Scratch编程语言，同时培养孩子逻辑思维能力，让孩子学会思考和解决问题，为未来奠定基础，与世界接轨。</p>
          
        </div>
      </div>
    </div>
    <div class="three row">
      <div class="three1">
        <div class="three2"></div>
         <div class="box35">
           <p>引入使用本年龄段孩子的机器人硬件，让孩子在场景内设计和创造属于自己的“机器人”，并通过Scratch为其编写简单的程序，完成自己创造设计的情节和动作，让孩子充分体验“上帝视角”，激发孩子的创造力。</p>
          
        </div>
      </div>
    </div>
    <div class="four row">
      <div class="four1">
        <div class="four2"></div>
        <div class="box34">
          <p>学习并应用由英国BBC推出的专为青少年编程教育设计的微型电脑开发板——micro:bit，结合makecode模块化编程软件，让孩子能设计并创造比启蒙阶段更多样更复杂的机器人，接轨世界最先进的STEAM教育平台，与全球40多个先进国家编程教育同步。</p>
          
        </div>
      </div>
    </div>
    <div class="five row">
      <div class="five1">
        <div class="five2"></div>
        <div class="box36">
          <p>学习现阶段全球广泛应用的开源硬件Arduino，构建智能机器人的基础知识，满足孩子对智能机器人的探索欲，扩充孩子的相关知识体系，让孩子的创新意识得到进一步提升。</p>
          
        </div>
      </div>
    </div>
    <div class="six row">
      <div class="six1">
        <div class="six2"></div>
        <div class="box34">
          <p>学习被多地纳入中高考考试科目的人工智能编程语言Python，了解人工智能开发的核心技术，先人一步迈进AI时代的大门，拥抱未来。</p>
         
        </div>
      </div>
    </div>
    <div class="seven row">
      <div class="seven1">
        <div class="seven2"></div>
        <div class="box36">
           <p>学习众多人工智能领域专家推荐的智能机器人操作系统ROS，并掌握一定机器人运动学知识，让孩子按照项目制方式，模拟国际赛事或人工智能专业团队完成机器人设计和创造，增强孩子的专业能力、创新拓展、团队合作等能力。</p>
          
        </div>
      </div>
    </div>
    <div class="eight row">
      <div class="eight1">
        <div class="eight2"></div>
        <div class="box34">
          <p>学习程序设计语言C++与程序设计知识、计算机基本常识和基本操作等专业知识，为参加专业赛事打下基础，为升学增加筹码。</p>
          
        </div>
      </div>
    </div>
    <div class="nine row">
      <div class="nine1">
        <div class="nine2"></div>
        <div class="box36">
          <p>学习机器人与人工智能专业相关素质拓展类课程及专业导论类课程，可提升学生的综合素质，帮助学生提前了解大学专业、进行学业生涯规划。</p>
          
        </div>
      </div>
    </div>
    <div class="ten row">
      <div class="ten1">
        <div class="ten2"></div>
        <div class="box34">
          <p>跨越科学界限，整合学科素养，通过跨学科，创新性的课程，以PBL项目式教学方式，引导孩子们探究与分析，激发学生创新创造能力，强化学生的工程素质培养。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "CurriculumStructure",
  mounted() {
    $(".alone").click(function() {
      scrollTo(0, 428);
      $(".alone")
        .addClass("stage1")
        .siblings()
        .removeClass("stage1");
    });
    $(".alone1").click(function() {
      scrollTo(0, 1332);
      $(".alone1")
        .addClass("stage1")
        .siblings()
        .removeClass("stage1");
    });
    $(".alone2").click(function() {
      scrollTo(0, 2065);
      $(".alone2")
        .addClass("stage1")
        .siblings()
        .removeClass("stage1");
    });
    $(".alone3").click(function() {
      scrollTo(0, 2816);
      $(".alone3")
        .addClass("stage1")
        .siblings()
        .removeClass("stage1");
    });
    $(".alone4").click(function() {
      scrollTo(0, 3552);
      $(".alone4")
        .addClass("stage1")
        .siblings()
        .removeClass("stage1");
    });
    $(".alone5").click(function() {
      scrollTo(0, 4306);
      $(".alone5")
        .addClass("stage1")
        .siblings()
        .removeClass("stage1");
    });
    $(".alone6").click(function() {
      scrollTo(0, 5015);
      $(".alone6")
        .addClass("stage1")
        .siblings()
        .removeClass("stage1");
    });
    $(".alone7").click(function() {
      scrollTo(0, 5793);
      $(".alone7")
        .addClass("stage1")
        .siblings()
        .removeClass("stage1");
    });
    $(".alone8").click(function() {
      scrollTo(0, 6472);
      $(".alone8")
        .addClass("stage1")
        .siblings()
        .removeClass("stage1");
    });
    $(".alone9").click(function() {
      scrollTo(0, 7300);
      $(".alone9")
        .addClass("stage1")
        .siblings()
        .removeClass("stage1");
    });
  }
};
</script>

<style scoped>
.carousel-inner {
  min-width: 1200px;
}
.box {
  min-width: 1200px;
  height: 905px;
  background: #f1f1f1;
}
.box1 {
  width: 1140px;
  height: 905px;
  margin: 0 auto;
  margin-top: 130px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/curr01.png");
}
.box2 {
  width: 565px;
  height: 318px;
  background: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/shengguoqi.gif");
  margin-top: 327px;
  float: left;
}
.box33{
      margin-top: 400px;
    font-size: 26px;
    margin-left: 633px;
    letter-spacing: 2px;
    text-align: justify;
    line-height: 36px;
    color: #666666;
}
.box34{
         margin-top: 236px;
    font-size: 26px;
    margin-right: 631px;
    letter-spacing: 3px;
    text-align: justify;
    line-height: 36px;
    color: #666666;
}
.box35{
            margin-top: 224px;
    font-size: 26px;
    margin-left: 633px;
    letter-spacing: 2px;
    text-align: justify;
    line-height: 36px;
    color: #666666;
}
.box36{
            margin-top: 273px;
    font-size: 26px;
    margin-left: 633px;
    letter-spacing: 2px;
    text-align: justify;
    line-height: 36px;
    color: #666666;
}
.box3{
            margin-top: 273px;
    font-size: 26px;
    margin-left: 633px;
    letter-spacing: 2px;
    text-align: justify;
    line-height: 36px;
}
.two {
  min-width: 1200px;
  height: 733px;
}
.two2 {
 width: 1140px;
  height: 733px;
  margin: 0 auto;
  margin-top: 130px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/curr02.png");
}
.two1 {
  width: 565px;
  height: 318px;
  float: right;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/01-Scratch.gif");
    
  margin-top: 158px;
  margin-right: 2px;
}
.three {
  min-width: 1200px;
  height: 751px;
  background: #f1f1f1;
}
.three1 {
 width: 1140px;
  height: 751px;
  margin: 0 auto;
  margin-top: 130px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/curr03.png");
}
.three2 {
  width: 565px;
  height: 318px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/Scratch-2.gif");
    
  margin-top: 170px;
  float: left;
}
.four {
  min-width: 1200px;
  height: 736px;
}
.four1 {
  width: 1140px;
  height: 736px;
  margin: 0 auto;
  margin-top: 130px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/curr04.png");
}
.four2 {
  width: 565px;
  height: 318px;
  float: right;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/03-MicroBitp.gif");
    
  margin-top: 158px;
  margin-right: 2px;
}
.five {
  min-width: 1200px;
  height: 754px;
  background: #f1f1f1;
}
.five1 {
 width: 1140px;
  height: 754px;
  margin: 0 auto;
  margin-top: 130px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/curr05.png");
}
.five2 {
  width: 565px;
  height: 318px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/04-Arduino.gif");
    
  margin-top: 176px;
  float: left;
}
.six {
  min-width: 1200px;
  height: 709px;
}
.six1 {
 width: 1140px;
  height: 709px;
  margin: 0 auto;
  margin-top: 130px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/curr06.png");
}
.six2 {
  width: 565px;
  height: 318px;
  float: right;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/05-python.gif");
    
  margin-top: 158px;
  margin-right: 2px;
}
.seven {
  min-width: 1200px;
  height: 778px;
  background: #f1f1f1;
}
.seven1 {
width: 1140px;
  height: 778px;
  margin: 0 auto;
  margin-top: 130px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/curr07.png");
}
.seven2 {
  width: 565px;
  height: 318px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/06-ROS.gif");
    
  margin-top: 173px;
  float: left;
}
.eight {
  min-width: 1200px;
  height: 679px;
}
.eight1 {
  width: 1140px;
  height: 679px;
  margin: 0 auto;
  margin-top: 130px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/curr08.png");
}
.eight2 {
  width: 565px;
  height: 318px;
  float: right;
  background: no-repeat
    url("http://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/07-C.gif");
    
  margin-top: 158px;
  margin-right: 2px;
}
.nine {
  min-width: 1200px;
  height: 806px;
  background: #f1f1f1;
}
.nine1 {
  width: 1140px;
  height: 806px;
  margin: 0 auto;
  margin-top: 130px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/curr09.png");
}
.nine2 {
  width: 565px;
  height: 318px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/08-college.gif");
    
  margin-top: 173px;
  float: left;
}
.ten {
  min-width: 1200px;
  height: 806px;
  background: #f1f1f1;
}
.ten1 {
  width: 1140px;
  height: 806px;
  margin: 0 auto;
  margin-top: 130px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/curr10.png");
}
.ten2 {
  width: 565px;
  height: 318px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/09-STEAM.gif");
  margin-top: 158px;
  margin-right: 2px;
  float: right;
}
.Suspension {
  position: fixed;
  z-index: 1;
  width: 136px;
  top: 16%;
  left: 0px;
  margin: auto;
  margin-left: 10px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/1.png");
}
.kuang {
  margin-top: 65px;
}
.alone {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  cursor: pointer;
  height: 49px;
}
.alone:hover {
  background: #c2e0ff;
  color: #317dd2;
}
.alone1 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  cursor: pointer;
  height: 56px;
}
.alone1:hover {
  background: #c2e0ff;
  color: #317dd2;
}
.alone2 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  cursor: pointer;
  height: 56px;
}
.alone2:hover {
  background: #c2e0ff;
  color: #317dd2;
}
.alone3 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  cursor: pointer;
  height: 56px;
}
.alone3:hover {
  background: #c2e0ff;
  color: #317dd2;
}
.alone4 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  cursor: pointer;
  height: 56px;
}
.alone4:hover {
  background: #c2e0ff;
  color: #317dd2;
}
.alone5 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  cursor: pointer;
  height: 56px;
}
.alone5:hover {
  background: #c2e0ff;
  color: #317dd2;
}
.alone6 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  cursor: pointer;
  height: 56px;
}
.alone6:hover {
  background: #c2e0ff;
  color: #317dd2;
}
.alone7 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  cursor: pointer;
  height: 56px;
}
.alone7:hover {
  background: #c2e0ff;
  color: #317dd2;
}
.alone8 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  cursor: pointer;
  height: 59px;
}
.alone8:hover {
  background: #c2e0ff;
  color: #317dd2;
  border-radius: 0 0 0 8px;
}
.alone9 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  cursor: pointer;
  height: 59px;
}
.alone9:hover {
  background: #c2e0ff;
  color: #317dd2;
  border-radius: 0 0 8px 8px;
}
.atch {
  font-family: "黑体";
  font-size: 14px;
  height: 49px;
  margin-bottom: 0;
  cursor: pointer;
  text-shadow: 1px 1px 4px #2e70bf;
}
.atch:hover{
  text-shadow: 0px 0px 0px #2e70bf;
}
/* .child {
  font-family: "黑体";
  font-size: 13px;
  margin-bottom: 0px;
  cursor: pointer;
  text-shadow: 1px 1px 4px #2e70bf;
}
.child:hover{
  text-shadow: 0px 0px 0px #2e70bf;
} */
.stage1 {
  color: orange;
}
.cla {
  font-family: "gaoduanhei";
  margin-bottom: -33px;
  text-align: center;
  margin-top: 5px;
  color: #ffffff;
  font-size: 20px;
  line-height: 26px;
  text-shadow: 1px 1px 4px #d98a02;
}
@font-face {
  font-family: gaoduanhei;
  src: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/gaoduanhei.TTF");
  src: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/gaoduanhei.TTF")
      format("woff"),
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/gaoduanhei.TTF")
      format("truetype"),
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/gaoduanhei.TTF")
      format("svg");
}
</style>
